<template>
  <view class="content">
    <image class="logo" src="/static/logo.png" />
    <view class="d1">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum repudiandae veritatis,
      voluptate accusamus amet voluptatibus omnis eius fugit rem ipsum veniam corrupti atque iure
      deleniti consectetur animi dicta, in dolor.
    </view>
    <text class="iconfont icon-location"></text>
    <text class="uniui-icon-symbol-tool-05"></text>
    <button @click="login">测试登录</button>
    <button @click="getMobileCode">获取验证码</button>
    <button type="primary">按钮1</button>
    <button type="warn">按钮2</button>
    <button @click="store.increment">{{ store.count }} +</button>
    <button @click="store.decrement">{{ store.double }} -</button>
  </view>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  const title = ref('Hello')

  import { request } from '@/utils/request'
  import { getCodeApi } from '../apis/user'
  import { useCounterStore } from '@/stores/counter'
  // 请求测试
  const login = async () => {
    const res = await request.post('/login/password', {
      mobile: '13211112222',
      // 密码 abc123456 测试：出现非 10000 的情况
      password: 'abc12345',
    })
    console.log(res)
  }

  // 测试获取验证码
  const getMobileCode = async () => {
    const res = await getCodeApi({ mobile: '13211112222', type: 'login' })
    console.log(res)
  }

  const store = useCounterStore()
</script>

<style lang="scss">
  // 单色图标
  @import '@/static/fonts/iconfont.scss';
  // 多色图标
  @import '@/static/color-fonts.scss';
  @import '@/uni.scss';
  .d1 {
    @include text-overflow(2);
  }

  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .logo {
    height: 200rpx;
    width: 200rpx;
    margin-top: 200rpx;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50rpx;
  }

  .text-area {
    display: flex;
    justify-content: center;
  }

  .title {
    font-size: 36rpx;
    color: #8f8f94;
  }
</style>
